<template>
  <div class="line-container">
    <!-- 标题 -->
    <div class="title">
      <p>未来七天游客数量趋势图</p>
      <img src="../../images/dataScreen-title.png" alt="暂无图片" />
    </div>
    <!-- 图表 -->
    <div ref="lineRef" class="line"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
const lineRef = ref();
onMounted(() => {
  const myEchart = echarts.init(lineRef.value);
  myEchart.setOption({
    title: {
      text: "(访问量)",
      textStyle: {
        color: "#375E9B",
        fontSize: 16,
      },
      top: 14,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
      splitLine: {
        // 设置分隔线，若是类目轴，则默认不显示
        // show: false
      },
    },
    yAxis: {
      type: "value",
      axisLine: { // 轴线
        show: true,
      },
      axisTick: { // 刻度
        show: true
      },
      splitLine: {
        // 设置分隔线，若是数值轴，则默认显示
        show: false,
      },
    },
    series: [
      {
        type: "line",
        data: [30, 150, 40, 99, 130, 90, 210],
        smooth: true,
        lineStyle: {
          color: "white",
          width: 4,
        },
        areaStyle: {
          color: "#67573C",
        },
      },
    ],
    grid: {
      left:60,
      bottom: 24,
      right: 30
    }
  });
});
</script>

<style scoped lang="scss">
.line-container {
  flex: 1;
  background: url("../../images/dataScreen-main-cb.png") no-repeat;
  background-size: 100% 100%;
  margin: 0 20px;
  .title {
    color: white;
    font-size: 20px;
  }
  .line {
    width: 100%;
    height: 250px;
  }
}
</style>
